<template>
  <div class="side-wrap" style="height:100%; background:#ffffff; color:#000000;">
    <div class="logo" style="height:64px; display:flex; align-items:center; justify-content:center;">
      <span v-if="!collapse" style="color:#000000; font-weight:700;">My Admin</span>
      <el-avatar v-else size="32">MA</el-avatar>
    </div>

    <el-menu
      :collapse="collapse"
      active-text-color="#409EFF"
      router
      :default-active="$route.path"
      style="border-right:none;"
    >
      <!-- 控制台 -->
      <el-menu-item index="/dashboard">
        <font-awesome-icon icon="tachometer-alt" class="menu-icon"/>
        <span slot="title">控制台</span>
      </el-menu-item>

      <!-- 系统管理 -->
      <el-sub-menu index="1">
        <template #title>
          <font-awesome-icon icon="cog" class="menu-icon"/>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/userManage">
          <font-awesome-icon icon="users" class="menu-icon"/>
          用户管理
        </el-menu-item>
        <el-menu-item index="/roles">
          <font-awesome-icon icon="user-shield" class="menu-icon"/>
          角色权限
        </el-menu-item>
      </el-sub-menu>

      <!-- 关于 -->
      <el-menu-item index="/about">
        <font-awesome-icon icon="info-circle" class="menu-icon"/>
        <span slot="title">关于</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'SideBar',
  props: {
    collapse: { type: Boolean, default: false }
  }
}
</script>

<style scoped>
.side-wrap {
  position: relative;
  color: #fff;
  transition: all 0.3s ease;
  /* 柔和立体阴影效果 */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15),
  0 0 15px rgba(0, 0, 0, 0.08);
  border-right: 1px solid #e0e0e0;
  z-index: 10;
}

.menu-icon {
  margin-right: 8px;
  width: 18px;
  text-align: center;
  transition: color 0.3s;
}

/* 悬停时轻微高亮 */
.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: #f5f7fa;
  box-shadow: inset 4px 0 0 #409EFF;
}

.el-menu {
  border: none;
  background: transparent;
}
</style>
